<template>
  <div class="health" :class="{ show: hidden, died: health <= 0 }">
    <img
      :class="{ hide: health <= i - 1 }"
      src="/icons/bamboo_stick.svg"
      alt="Bamboo stick"
      v-for="i in maxHealth"
      :key="i"
    />
  </div>
</template>

<script setup lang="ts">
defineProps<{ maxHealth: number; health: number; hidden: boolean }>();
</script>

<style scoped lang="scss">
.health {
  display: flex;
  position: absolute;
  top: -65px;
  left: 10px;
  z-index: 5;
  transition: top 450ms ease;
  pointer-events: none;

  img {
    &:nth-child(even) {
      margin-top: 6px;
    }

    &.hide {
      animation: health-hide 750ms ease forwards;
    }
  }

  &.show {
    top: 10px;
  }

  &.died {
    top: -65px;
  }
}

@keyframes health-hide {
  0% {
    transform: scale(1);
    filter: saturate(1) hue-rotate(0);
  }
  30% {
    transform: scale(1.3);
  }
  50% {
    filter: hue-rotate(237deg) saturate(2);
  }
  60% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
    filter: saturate(0) hue-rotate(0);
  }
}
</style>
